import React, {
    PureComponent
} from 'react';

import {
    Text,
    StyleSheet,
} from 'react-native';

import Press from './../Press';

import * as Animated from 'react-native-animatable';

import * as CONST from './../../const';

interface Props {
    style?:any,
    titleStyle?:any
    onPress: Function,
    title: string,
    color: string,
    center: boolean,
    disabled:boolean,
    disabledColor:string,
    type: Animated.Animation
}

class Button extends PureComponent<Props> {

    static defaultProps = {
        center: true,
        type: `fadeIn`,
        disabled:false,
        color: CONST.color,
        onPress:() => null,
        disabledColor:`#e7e8eb`
    }

    get children() {
        const {
            title,
            children,
            disabled,
            titleStyle,
        } = this.props;

        const _styles = (
            [styles.title]
        )

        if (!title) {
            return children;
        }

        _styles.push(titleStyle)

        if(disabled) {
            _styles.push({
                color:`#aaa`
            })
        }

        return (
            <Text style={_styles}>
                {title}
            </Text>
        )
    }

    get curStyle() {
        let {
            color,
            center,
            disabled,
            style,
            disabledColor
        } = this.props;

        color = disabled ? disabledColor:color;

        const _styles: Array<any> = [];

        const _curStyle = {
            borderColor:color,
            backgroundColor: color
        }

        if (!!color) {
            _styles.push(_curStyle)
        }

        if (center) {
            _styles.push(styles.center)
        }

        _styles.push(style);

        if(disabled) {
            _styles.push(_curStyle)
        }

        return _styles;
    }

    get styles() {
        return [
            styles.container,
            ...this.curStyle
        ]
    }

    onPress = () => {
        const {
            onPress
        } = this.props
        onPress();
    }

    render() {
        const {
            type,
            disabled
        } = this.props;

        return (
            <Press
                type={type}
                disabled={disabled}
                style={this.styles}
                onPress={this.onPress}
                children={this.children}
            />
        )
    }
}

export default Button;


const styles: any = StyleSheet.create({
    container: {
        height: 50
    },
    center: {
        alignItems: `center`,
        justifyContent: `center`
    },
    title: {
        fontSize: 16,
        color: `#fff`,
        fontFamily:CONST.fontFamily
    }
})